<!-- 头部工具栏 -->
<template>
  <div class="box_bread">
    <!-- 面包屑 -->
    <el-col :span="12" class="box_col">
      <a class="show-hide" @click="isShow" :title="isCollapse?'展开':'折叠'">
        <!-- 图标 -->
        <i class="el-icon-s-fold" :style="{ transform:'rotate('+(isCollapse?-180:0)+'deg)'}" style="font-size: 25px;color: black;line-height:50px"></i>
      </a>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index/home' }">{{$t('home')}}</el-breadcrumb-item>
        <template v-for="(item) in $route.matched.filter(item=>!['index','home'].includes(item.name))">
          <!-- includes仅能用来判断元素是否存在 -->
          <el-breadcrumb-item :key="item.name">{{$t(item.meta.title)}}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </el-col>
    <!-- 全屏-尺寸-大小 -->
    <el-col :span="12" class="box_el">
      <!-- 全屏 -->
      <svg t="1658842626354" class="icon" viewBox="0 0 1024 1024" @click="full" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2741" width="25" height="25">
        <path
          d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z"
          fill="#444444" p-id="2742"></path>
      </svg>
      <!-- 布局大小 -->
      <div style="margin-top: 5px;">
        <el-dropdown trigger="click" @command="handlerCommand" :key="flush">
          <span class="el-dropdown-link">
            <svg t="1658842720211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3824" width="20" height="20">
              <path d="M748.4 210.9H44c-11 0-20-9-20-20s9-20 20-20h704.4c11 0 20 9 20 20s-8.9 20-20 20z" fill="#1C1C1C" p-id="3825"></path>
              <path d="M396.2 915.1c-11 0-20-9-20-20V196.6c0-11 9-20 20-20s20 9 20 20v698.5c0 11.1-8.9 20-20 20z" fill="#1C1C1C" p-id="3826"></path>
              <path d="M996 498H578.8c-11 0-20-9-20-20s9-20 20-20H996c11 0 20 9 20 20s-8.9 20-20 20z" fill="#1C1C1C" p-id="3827"></path>
              <path d="M787.4 915.1c-11 0-20-9-20-20V481.4c0-11 9-20 20-20s20 9 20 20v413.8c0 11-8.9 19.9-20 19.9z" fill="#1C1C1C" p-id="3828"></path>
            </svg>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="''" :disabled="size===''">默认</el-dropdown-item>
            <el-dropdown-item :command="'medium'" :disabled="size==='medium'">中等</el-dropdown-item>
            <el-dropdown-item :command="'small'" :disabled="size==='small'">小型</el-dropdown-item>
            <el-dropdown-item :command="'mini'" :disabled="size==='mini'">迷你</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 主题颜色 换肤 -->
      <handover-skin></handover-skin>
      <!-- <div class="block">
        <el-color-picker v-model="color" size="mini" @change="onChange"></el-color-picker>
      </div> -->

      <!-- 切换中英文 -->
      <el-dropdown trigger="click" @command="handSwitchover">
        <div>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn" :disabled="language==='cn'">中文</el-dropdown-item>
          <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 用户头像 -->
      <user-header></user-header>
    </el-col>
  </div>
</template>
<script>
import UserHeader from "@/components/userheader/UserHeader.vue"
import HandoverSkin from "@/components/peeling/HandoverSkin.vue"
import screenfull from "screenfull"
import Cookies from 'js-cookie'
export default {
  components: { UserHeader, HandoverSkin },
  data() {
    return {
      isCollapse: false, //菜单是否为折叠状态
      color: '#10dd3c', //主题图标颜色
      size: 'default', //尺寸
      language: 'cn',  //默认中文
      flush: 1, // // 解决标签的大小问题,改变key值,强制刷新
    }
  },
  created() {
    // 尺寸设置
    // console.log(Cookies.get('size'))
    this.$ELEMENT.size = Cookies.get('size')
    this.size = Cookies.get('size') ? Cookies.get('size') : ''

    // 默认语言中文
    if (Cookies.get('val') == undefined) {
      this.handSwitchover('cn')
    }
    this.language = Cookies.get('val')
    this.$i18n.locale = Cookies.get('val')

  },
  watch: {
    $route(news, old) { //监听路由实例(新值和旧值)
      this.flush++;
    }
  },
  methods: {
    //展开折叠
    isShow() {
      this.$emit('childFn', !this.isCollapse)
      this.isCollapse = !this.isCollapse
    },
    //全屏
    full() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "你的浏览器不支持全屏显示!",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
    },
    //主题颜色--换肤
    // onChange(value) {
    //   console.log(value)
    //   this.$emit('theme', value)
    //   this.colorVal = value
    // },
    //布局大小
    handlerCommand(size) {
      console.log(size);
      this.size = size;
      // console.log(this.$ELEMENT)
      this.$ELEMENT.size = ''
      this.$ELEMENT.size = size // $ELEMENT是 Element-UI 向 Vue 暴露的实例属性
      Cookies.set('size', size) // 设置默认和刷新浏览器设置为你指定的大小
      let path = this.$route.path
      this.$nextTick(() => {
        this.$router.push({
          path: '/index/redirect/' + path
        })
      })
      this.$forceUpdate()  //强制刷新
      this.$message({
        message: '更换成功',
        type: 'success',
      })
    },
    //切换中英文
    handSwitchover(val) {
      // console.log(val)
      this.language = val
      Cookies.set('val', val)
      this.$i18n.locale = val;
      localStorage.language = val
    }

  }
}
</script>
<style scoped lang="less">
// 标签页导航
.box_bread {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

//首页
.el-col {
  display: flex;
}

.box_col {
  display: flex;
  width: 300px;
  // background-color:red;
}

//   全屏
.box_el {
  width: 220px;
  //   background-color: aqua;
  align-items: center;
  justify-content: space-around;

  .block {
    margin-top: 7px;
  }
}

/deep/.el-breadcrumb {
  line-height: 50px;
  margin-left: 20px;
}
</style>